<template>
  <div class="container">
    <program-detail :question="experimentData"></program-detail>
    <el-button
      class="btn_back"
      type="primary"
      plain
      icon="el-icon-d-arrow-left"
      @click="back"
      >返回</el-button
    >
    <div class="box">
      <div class="box_head">
        <span>代码提交</span>
      </div>
      <div class="box_content">
        <div class="input">
          <code-mirror
            class="codeMirror"
            @input="code_input"
            @language-change="languageChange"
          ></code-mirror>
          <code-result
            :solutionId="solutionId"
            :problemId="experimentData.id"
            :upload="submit"
            @submitSuccessAnswer="submitAnswer"
            class="codeResult"
          ></code-result>
          <!-- <el-button id="reset" @click="reset">重置代码</el-button> &#12288;&#12288;
      &#12288;
      <el-button id="upload" :loading="submitLoading" @click="submit">提交</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editPGProblem } from "@/api/question.js";
import { submitQuestion } from "@/api/solutions.js";
import programDetail from "@/components/programDetail.vue";
import codeMirror from "@/components/codeMirror.vue";
import codeResult from "@/components/codeResult.vue";
export default {
  name: "experimentDetail",
  components: {
    programDetail, //题目详情
    codeMirror, //编辑窗口
    codeResult //编译结果
  },
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      submitLoading: false,
      userInfo: null,
      language: 2,
      solutionId: null,
      src: "", //输入的代码
      experimentData: {
        removeLoading: null,
        type: null
      }
    };
  },

  created() {
    this.experimentData = this.$route.params.data;
    console.log(this.experimentData);
  },
  methods: {
    submitAnswer() {
      delete this.experimentData.removeLoading;
      delete this.experimentData.type;
      delete this.experimentData.status;
      delete this.experimentData.examAndExperimentId;
      this.experimentData.answer = this.src;
      console.log(this.experimentData);
      editPGProblem(this.experimentData)
        .then(res => {
          this.$message.success("参考答案上传成功！");
        })
        .catch(err => {
          this.$message.error("参考答案上传或编辑失败！");
        });
      // this.$confirm(
      //   "此操作将上传参考答案,并且覆盖原来的参考答案, 是否继续?",
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      //   }
      // )
      //   .then(() => {})
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消"
      //     });
      //   });
    },
    //写入代码
    code_input(code) {
      this.src = code;
    },
    //换编译语言
    languageChange(id) {
      this.language = id;
    },
    //清空
    reset() {
      this.code = "";
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    //提交代码
    submit() {
      this.$emit("submitSrc", this.src, this.$route.params.data.id);
      if (this.src.length <= 1) {
        this.solutionId = 0;
        this.$message.warning("请填写代码");
        return;
      }
      this.submitLoading = true;
      let obj = {
        language: this.language,
        problemId: this.experimentData.id,
        examAndExperimentId: this.experimentData.examAndExperimentId,
        src: this.src,
        userId: JSON.parse(localStorage.getItem("user")).userId
      };
      console.log(obj,"obj")
      submitQuestion(obj)
        .then(res => {
          this.solutionId = res.data.id;
        })
        .catch(() => {
          this.solutionId = 0;
          this.$message.error("提交评判失败，请稍后再试");
        })
        .finally(() => {
          this.submitLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
}
.input {
  display: flex;
  flex-direction: row;
}
.codeMirror {
  flex: 1;
}
.codeResult {
  margin-left: 20px;
}

.btn_back {
  position: absolute;
  left: 10px;
  top: -10px;
}

.title1 {
  font-size: 25px;
}

.box {
  white-space: pre-line;
  text-align: left;
  border: solid 2px rgba(240, 243, 250, 1);
  .box_head {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    color: #7c828e;
    background: #edf3ff;
    border-bottom: solid 1px rgba(240, 243, 250, 1);
  }
  .box_content {
    padding: 5px;
  }
  margin: 10px 0;
}
</style>
